<div class="waper">
    <div>
        <div>
            <h2>json-server</h2>
            <p>需要先运行：json-server mock/data.json，npm start 时已运行</p>
            <button (click)="useJsonServer(0)">useJsonServer(0)</button>
            <button (click)="useJsonServer(1)">useJsonServer(1)</button>
            <button (click)="widthHttpInterceptor(1)">使用了拦截器</button>
            <br> {{useJsonServers|json}}
        </div>
        <div>
            <h2>Observable.interval：</h2>
            <p style="color:red;">{{datas}}</p>
        </div>
        <div>
            <button (click)="extendsFun()">extends 高级用法</button>
        </div>
    </div>
    <div>
        <h2>Observable</h2>
        <input class="pluck" type="text" placeholder="pluck">{{Observable1|json}}
        <br>
        <input class="map" type="text" placeholder="map"> {{Observable2|json}}
        <br>
        <input class="combineLatest1" type="text" placeholder="combineLatest1">
        <input class="combineLatest2" type="text" placeholder="combineLatest2">
        <br>
        <span style="font-size:12px;">combineLatest1+combineLatest2：</span>
        <span style="color:red;"> {{combineLatestData|json}}</span>
        <br>
        <button (click)="seeOf()">seeOf()</button>seeOfs：{{seeOfs>0?seeOfs:''}}
        <br>
        <input class="distinc1" type="text" placeholder="distinc"> {{distincData|json}}
        <br>
        <input class="merges1" type="text" placeholder="merges1">
        <input class="merges2" type="text" placeholder="merges2">
        <br>{{mergeData}}
        <br>
        <button (click)="seeScan()">seeScan()</button>{{scanData}}{{doData|json}}
        <br>
        <button (click)="useNewSubject()">useNewSubject()</button>
        <button (click)="bufferCounts()">bufferCounts()</button>
        <button (click)="bufferTimes()">bufferTimes()</button>
        <br>
        <button (click)="forkJoin_concat()">forkJoin_concat()</button>
        <button (click)="show()">BehaviorSubject</button>
    </div>
    <div>
        <app-cild5></app-cild5>
    </div>
</div>
<div>
    <media-learn></media-learn>
</div>